<!--
 * @Author: your name
 * @Date: 2020-12-27 12:48:22
 * @LastEditTime: 2021-03-26 11:05:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \white-jotter-blog-vue\src\views\jotter-details\index.vue
-->
<template>
  <el-card style="text-align: left;width: 990px;margin: 35px auto 0 auto">
    <div>
      <h1 style="font-size: 2.5rem">{{jotterArticle.articleTitle}}</h1>
      <el-divider content-position="left">{{jotterArticle.articleDate}}</el-divider>
      <div class="markdown-body">
        <div v-html="$md.markdownIt.render(jotterArticle.articleContentMd)"></div>
      </div>
    </div>
    <!-- 回到顶部 -->
    <el-backtop :bottom="150" :right="180" />
  </el-card>
</template>

<script>
import * as utils from "utils/index";
export default {
  name: "JotterDetails",
  data() {
    return {
      id: this.$route.params.id,
      jotterArticle: {},
    };
  },
  mounted() {
    this.getJotterArticle(this.id);
  },
  methods: {
    async getJotterArticle(jotterId) {
      const { data: res } = await this.$http.get(`admin/jotter?id=` + this.id);
      this.jotterArticle = res.data;
      this.jotterArticle.articleDate = utils.parseTime(this.jotterArticle.articleDate, "{y}-{m}-{d} {h}:{i}:{s}")
    },
  },
};
</script>

<style scoped>

</style>